<template>
  <div>
    <h2>当前的和为: {{ sum }}</h2>
    <button @click="sum++">点我+1</button>
    <hr />
    <h2>当前鼠标x的坐标为: x: {{ x }} y: {{ y }}</h2>
  </div>
</template>

<script>
import { ref } from "vue";
import usePoint from "../hooks/usePoint.js";
export default {
  name: "Demo",
  setup() {

   /**
    * 1.什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。
      2.类似于vue2.x中的mixin。
      3.自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
    *  */ 


    let sum = ref(0);
 
    const { x, y } = usePoint();
    return {
      sum,
      x,
      y,
    };
  },
};
</script>